<!DOCTYPE html>
<html lang="en">
<head>
    <title>control page</title>
    <!--https://blog.csdn.net/zanran8/article/details/80698347-->
    <meta charset="utf-8">
    <!--<meta charset="utf-8" name="viewport"-->
    <!--content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>-->
    <script>
        function directionBtnDown(direction) {
            var url = "car_operation?cmd=" + direction;
            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send()
        }

        function directionCameraBtnDown(direction) {
            var url = "/camera/operation?cmd=" + direction;
            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send()
        }

        function get_Temperature() {
            var url = "/get_cpu_temperature";
            var request = new XMLHttpRequest();
            const TemperatureElement = document.querySelector("#Temperature");
            request.onreadystatechange = function () {//服务器返回值的处理函数，此处使用匿名函数进行实现
                var responseText = request.responseText;
                if (responseText > "60") {
                    TemperatureElement.style.color = "red";
                } else {
                    TemperatureElement.style.color = "black";
                }
                TemperatureElement.innerHTML = responseText;
            };
            request.open("GET", url);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send();
        }

        function get_Ranging() {
            var url = "/get_ranging";
            var request = new XMLHttpRequest();
            const TemperatureElement = document.querySelector("#Ranging");
            request.onreadystatechange = function () {//服务器返回值的处理函数，此处使用匿名函数进行实现
                var responseText = request.responseText;
                TemperatureElement.innerHTML = responseText;
            };
            request.open("GET", url);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send();
        }

        function directionBtnUp() {
            var url = "car_operation?cmd=stop";
            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            request.send()
        }
    </script>

    <link rel="stylesheet" href="static/operation_page.css">

<body>

<!--<div style="margin: 0 auto; width: 80%">-->
<div>
    <button><a href="/auto_obstacle_avoidance">自动避障模式</a></button>
    <button><a href="/estop_car">停止自动避障模式</a></button>
    <hr>
    <div>车前障碍物距离：<span id="Ranging">0</span> cm</div>
    <div>当前CPU温度：<span id="Temperature">0</span> ℃</div>
</div>
<div>
    <span id="camera_view" class="camera">

    <iframe src="http://192.168.99.151:8080/javascript_simple.html" frameborder="0" width="100%" height="100%"
            scrolling="no"></iframe>
        <!--<img src="./?action=stream" />-->
    </span>
</div>
<div>
    <!--<span id="car_control" class="car">-->
    <button class="top drectionBtn" id="F" onmousedown="directionBtnDown('F')">F
    </button>
    <button class="left drectionBtn" id="L" onmousedown="directionBtnDown('L')">L
    </button>
    <button class="rest drectionBtn" id="stop" onmousedown="directionBtnDown('Stop')">Stop</button>
    <button class="right drectionBtn" id="R" onmousedown="directionBtnDown('R')">
        R
    </button>
    <button class="bottom drectionBtn" id="B" onmousedown="directionBtnDown('B')">
        B
    </button>
    <!--</span>-->
</div>

<div style="float: right">
    <!--<span id="camera_control" class="camera_control">-->
    <button class="top drectionBtn" id="VU" onmousedown="directionCameraBtnDown('CU')">Up</button>
    <button class="left drectionBtn" id="HL" onmousedown="directionCameraBtnDown('CL')">Left</button>
    <button class="rest drectionBtn" id="Rest" onmousedown="directionCameraBtnDown('Rest')">Rest</button>
    <button class="right drectionBtn" id="HR" onmousedown="directionCameraBtnDown('CR')">Right</button>
    <button class="bottom drectionBtn" id="VD" onmousedown="directionCameraBtnDown('CD')">Down</button>
    <!--</span>-->
</div>
<!--</div>-->

<script>
    setInterval(
        function () {
            get_Temperature();
            get_Ranging();
        }, 3000
    );
</script>

</body>

</html>